import styled from 'styled-components'
import { SYSTEM_VERSION, COMPANY_INFO } from '@/utils/constant'
import { t } from 'i18next'

export const StyledAboutWrap = styled.div`
	padding: 0 33px;
	font-size: 12px;
	color: #4e4e4e;
	.companyInfo {
		margin: 38px 0 0 9px;
	}
	.systemModeAbbr {
		text-align: right;
		// margin: 14px 0;
		font-size: 14px;
		font-weight: bold;
	}
	.paragraph {
		margin-bottom: 9px;
		width: 337px;
	}
	.system-address {
		color: #007ac0;
		text-decoration: underline;
		margin-left: 15px;
	}
`
export const CompanyLogoBlack = styled.div`
	height: 60px;
	width: 116px;
	margin: 37px 0 0;
	cursor: default;
`
const AboutBrand = () => {
	return (
		<StyledAboutWrap>
			<CompanyLogoBlack>
				<img src={COMPANY_INFO.aboutUrl} alt="" />
			</CompanyLogoBlack>
			<div className="systemModeAbbr">/{t(COMPANY_INFO.systemModeAbbr)}</div>
			<div className="companyInfo">
				<p className="paragraph">
					{t('{{companyName}} 版权所有', { companyName: t(COMPANY_INFO.companyName) })}
				</p>
				<p className="paragraph">
					Copyright © {COMPANY_INFO.establishYear}
					{new Date().getFullYear()} KEDACOM. All rights reserved.
				</p>
				<p className="paragraph">
					<span>Version:{SYSTEM_VERSION}</span>
					<a href={COMPANY_INFO.netAddress1Href} className="system-address">
						{COMPANY_INFO.netAddress1Txt}
					</a>
				</p>
			</div>
		</StyledAboutWrap>
	)
}
export default AboutBrand
